<!-- 管理员:课程考核管理:成绩分析-学员成绩排名 -->
<template>
  <div>
    <div>
      <el-form label-suffix="：" label-position="left" style="display: flex;">
        <el-form-item label-width="55px" label="年级">
          <el-select v-model="queryForm.grade" size="mini" placeholder="请选择年级" style="margin: 0 20px 0 -15px;" @change="handleChangeGrade">
            <el-option v-for="(item, index) in gradeList" :key="index" :label="item.xqszxn" :value="item.xqszxn" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="55px" label="学期">
          <el-select v-model="queryForm.semester" size="mini" clearable placeholder="请选择学期" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in semesterList" :key="index" :label="item.xqmc" :value="item.xqmc" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="85px" label="培养层次">
          <el-select v-model="queryForm.level" size="mini" clearable placeholder="请选择培养层次" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in levelList" :key="index" :value="item.dictValue" :label="item.dictKey" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="70px" label="学员队">
          <el-select v-model="queryForm.team" size="mini" clearable placeholder="请选择学员队" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in teamList" :key="index" :value="item.deptName" :label="item.deptName" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="85px" label="专业班次">
          <el-select v-model="queryForm.class" size="mini" clearable placeholder="请选择专业班次" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in classList" :key="index" :value="item.id" :label="item.className" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="85px" label="修习类型">
          <el-select v-model="queryForm.study" size="mini" clearable placeholder="请选择修习类型" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in studyList" :key="index" :value="item.dictKey" :label="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="85px" label="考试方式">
          <el-select v-model="queryForm.exam" size="mini" placeholder="请选择考试方式" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in examList" :key="index" :value="item.dictKey" :label="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="85px" label="排名方式">
          <el-select v-model="queryForm.sort" size="mini" placeholder="请选择排名方式" style="margin-left: -15px;">
            <el-option v-for="(item, index) in sortList" :key="index" :value="item.dictKey" :label="item.dictValue" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-form style="display: flex; margin-bottom: -20px;">
        <el-form-item>
          <el-radio v-model="queryForm.check" label="1" style="margin-right: 30px;">
            <span class="titleStyle">全部</span>
          </el-radio>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="queryForm.check" label="2" style="margin-right: 30px;">
            <span class="titleStyle">前&nbsp;</span>
            <el-input-number v-model="queryForm.amount1" controls-position="right" size="mini" :min="1" style="width: 95px;" />
            <span class="titleStyle">&nbsp;名学员</span>
          </el-radio>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="queryForm.check" label="3" style="margin-right: 30px;">
            <span class="titleStyle">后&nbsp;</span>
            <el-input-number v-model="queryForm.amount2" controls-position="right" size="mini" :min="1" style="width: 95px;" />
            <span class="titleStyle">&nbsp;名学员</span>
          </el-radio>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="queryForm.check" label="4" style="margin-right: 30px;">
            <span class="titleStyle">各专业班次前&nbsp;</span>
            <el-input-number v-model="queryForm.amount3" controls-position="right" size="mini" :min="1" style="width: 95px;" />
            <span class="titleStyle">&nbsp;名学员</span>
          </el-radio>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="queryForm.check" label="5" style="margin-right: 30px;">
            <span class="titleStyle">各专业班次后&nbsp;</span>
            <el-input-number v-model="queryForm.amount4" controls-position="right" size="mini" :min="1" style="width: 95px;" />
            <span class="titleStyle">&nbsp;名学员</span>
          </el-radio>
        </el-form-item>
        <div class="button-style" style="margin-left: auto; width: 75px; margin-top: 6px; background: #f1f8fe; border: 1px solid #51aef6;" @click="handleSearch">
          <img src="@/assets/assessment/icon-search.png" alt="" />
          <span style="font-size: 14px; color: #51aef6;">查询</span>
        </div>
      </el-form>
    </div>
    <div style="margin: 15px 0;">
      <el-table
        border
        :data="tableData"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class">
        <el-table-column prop="mc" label="名次" show-overflow-tooltip align="center" />
        <el-table-column prop="studentcode" label="学号" show-overflow-tooltip align="center" />
        <el-table-column prop="studentname" label="姓名" show-overflow-tooltip align="center" />
        <el-table-column prop="spectilyclass" label="专业班次" show-overflow-tooltip align="center" />
        <el-table-column prop="spectilyclassavg" label="平均分" show-overflow-tooltip align="center" />
        <el-table-column prop="spectilyclassmc" label="专业班次名次"  show-overflow-tooltip align="center" />
        <el-table-column prop="num" label="专业班次最高" show-overflow-tooltip align="center" />
        <el-table-column prop="min" label="专业班次最低" show-overflow-tooltip align="center" />
        <el-table-column prop="avg" label="专业班次平均" show-overflow-tooltip align="center" />
      </el-table>
    </div>
    <div class="button-style">
      <img src="@/assets/assessment/icon-export.png" alt="" />
      <download-excel
        :data="tableData"
        :fields="jsonFields"
        type="xls"
        name="学员成绩排名.xls"
        style="font-size: 14px; color: #f3b815;">
        <span>导出Excel</span>
      </download-excel>
    </div>
    <div style="float: right; padding-bottom: 15px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      style="padding: 0;">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { queryDictByCode, querySemesterByYear, reqCheckLevelList, reqCheckYearList, reqXydList, reqZybcList, queryScoreRank } from '@/api/admin1/check'
export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      total: 0,
      queryForm: {
        grade: '',
        semester: '',
        level: '',
        team: '',
        class: '',
        study: '',
        exam: '',
        sort: '',
        check: '1',
        amount1: undefined,
        amount2: undefined,
        amount3: undefined,
        amount4: undefined
      },
      gradeList: [],
      semesterList: [],
      levelList: [],
      teamList: [],
      classList: [],
      studyList: [],
      examList: [],
      sortList: [],
      tableData: [],
      jsonFields: {
        名次: 'mc',
        学号: 'studentcode',
        姓名: 'studentname',
        专业班次: 'spectilyclass',
        平均分: 'spectilyclassavg',
        专业班次名次: 'spectilyclassmc',
        专业班次最高: 'num',
        专业班次最低: 'min',
        专业班次平均: 'avg'
      }
    }
  },
  mounted() {
    reqCheckYearList().then((res) => {
      if (res.data.data && res.data.data.length > 0) {
        this.gradeList = res.data.data
        this.queryForm.grade = res.data.data[0].xqszxn
        this.handleChangeGrade(res.data.data[0].xqszxn)
      }
    })
    reqCheckLevelList().then(res => {
      if(res.data.data && res.data.data.length > 0){
        this.levelList = res.data.data[0].children
      }
    })
    reqXydList().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.teamList = res.data.data
      }
    })
    queryDictByCode('xxType').then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.studyList = res.data.data
      }
    })
    queryDictByCode('khfsType').then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.examList = res.data.data[0].childdictBizs
        this.queryForm.exam = res.data.data[0].childdictBizs[0].dictKey
      }
    })
    queryDictByCode('rankType').then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.sortList = res.data.data
        this.queryForm.sort = res.data.data[0].dictKey
      }
    })
    reqZybcList().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.classList = res.data.data
        this.handleSearch()
      }
    })
  },
  watch: {
    'queryForm.check': function (val) {
      if (val === '2') {
        this.queryForm.amount2 = undefined
        this.queryForm.amount3 = undefined
        this.queryForm.amount4 = undefined
      } else if (val === '3') {
        this.queryForm.amount1 = undefined
        this.queryForm.amount3 = undefined
        this.queryForm.amount4 = undefined
      } else if (val === '4') {
        this.queryForm.amount1 = undefined
        this.queryForm.amount2 = undefined
        this.queryForm.amount4 = undefined
      } else if (val === '5') {
        this.queryForm.amount1 = undefined
        this.queryForm.amount2 = undefined
        this.queryForm.amount3 = undefined
      } else {
        this.queryForm.amount1 = undefined
        this.queryForm.amount2 = undefined
        this.queryForm.amount3 = undefined
        this.queryForm.amount4 = undefined
      }
    }
  },
  methods: {
    handleChangeGrade: function (val) {
      this.queryForm.semester = ''
      querySemesterByYear(val).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.semesterList = res.data.data
        }
      })
    },
    handleSearch: function () {
      if (this.queryForm.check === '2' && !this.queryForm.amount1) {
        this.$message({
          message: '请输入学员数量（前N名学员）！',
          type: 'warning'
        })
        return
      }
      if (this.queryForm.check === '3' && !this.queryForm.amount2) {
        this.$message({
          message: '请输入学员数量（后N名学员）！',
          type: 'warning'
        })
        return
      }
      if (this.queryForm.check === '4' && !this.queryForm.amount3) {
        this.$message({
          message: '请输入学员数量（各专业班次前N名学员）！',
          type: 'warning'
        })
        return
      }
      if (this.queryForm.check === '5' && !this.queryForm.amount4) {
        this.$message({
          message: '请输入学员数量（各专业班次后N名学员）！',
          type: 'warning'
        })
        return
      }
      let params = {
        grade: this.queryForm.grade,
        ksfs: this.queryForm.exam,
        orderfs: this.queryForm.sort,
        pylevel: this.queryForm.level,
        spectliyclass: this.queryForm.class,
        studentdui: this.queryForm.team,
        xueqi: this.queryForm.semester,
        xxtye: this.queryForm.study,
        current: this.pageNo,
        size: this.pageSize
      }
      if (this.queryForm.check === '2') {
        params.beforestudent = this.queryForm.amount1
      } else if (this.queryForm.check === '3') {
        params.belaststudent = this.queryForm.amount2
      } else if (this.queryForm.check === '4') {
        params.zybcbeforestudnet = this.queryForm.amount3
      } else if (this.queryForm.check === '5') {
        params.zybclaststudent = this.queryForm.amount4
      }
      queryScoreRank(params).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.tableData = res.data.data
          this.total = res.data.data.length
        } else {
          this.tableData = []
          this.total = 0
        }
      })
    },
    handleSizeChange: function (val) {
      this.pageSize = val
      this.handleSearch()
    },
    handleCurrentChange: function (val) {
      this.pageNo = val
      this.handleSearch()
    }
  }
}
</script>

<style lang="less" scoped>
  .button-style {
    float: left;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 110px;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  /deep/ .el-form-item__label {
    color: #004ca7;
    font-size: 14px;
  }
</style>
